<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>06css배경</title>

	</head>

	<body style=
		"width: 650px; height: 500px; border: 1px solid black;
		background-image: url('images/suzy/003.jpg');
		background-repeat: no-repeat; background-position: 50% 50%;
		background-attachment: fixed;">
		<h1>CSS 배경</h1>
		<h2>배경이미지 띄우기 : background-image</h2>
		<div style=
			"width: 650px; height: 500px; border: 1px solid black;
			background-image: url('images/suzy/001s.jpg');">
		</div>
		
		<hr />
		<h2>배경이미지 반복 제어 : background-reapeat</h2>
		<div style=
			"width: 650px; height: 500px; border: 1px solid black;
			background-image: url('images/suzy/001s.jpg');
			background-repeat: no-repeat">
		</div>
		
		<hr />
		<h2>배경이미지 반복 제어 : background-reapeat</h2>
		<div style=
			"width: 650px; height: 500px; border: 1px solid black;
			background-image: url('images/suzy/001s.jpg');
			background-repeat: repeat-x">
		</div>
		
		<hr />
		<h2>배경이미지 반복 제어 : background-reapeat</h2>
		<div style=
			"width: 650px; height: 500px; border: 1px solid black;
			background-image: url('images/suzy/001s.jpg');
			background-repeat: repeat-y">
		</div>
		
		<hr />
		<h2>배경이미지 위치지정 : background-position</h2>
		<div style=
			"width: 650px; height: 500px; border: 1px solid black;
			background-image: url('images/suzy/001s.jpg');
			background-repeat: no-repeat; background-position: center center;">
		</div>
		
		<hr />
		<h2>배경이미지 위치지정 : background-position</h2>
		<div style=
			"width: 650px; height: 500px; border: 1px solid black;
			background-image: url('images/suzy/001s.jpg');
			background-repeat: no-repeat; background-position: 100px 100px">
		</div>
		
		<hr />
		<h2>배경이미지 위치지정 : background-position</h2>
		<div style=
			"width: 650px; height: 500px; border: 1px solid black;
			background-image: url('images/suzy/001s.jpg');
			background-repeat: no-repeat; background-position: 50% 50%">
		</div>
		
		<hr />
		<h2>배경이미지 고정 : background-attachment</h2>
		
		<hr />
		<h2>배경이미지 관련 속성 단축형으로 쓰기</h2>
		<p>background : 색상, 이미지, 반복여부, 고정여부, 위치</p>
		<div style="background: url('images/suzy/001s.jpg') no-repeat 50% 50%;
					width: 650px; height: 500px; border: 1px solid black;">
		</div>
		
		
	</body>
</html>
